<!DOCTYPE html> 
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
    <!--[if IE]><script src="/media/flot-0.7/js/excanvas.min.js"></script><![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery-1.5.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="/media/flot-0.7/js/jquery.flot.min.js"></script>
    <script language="javascript" type="text/javascript" src="/media/flot-0.7/js/jquery.flot.pie.js"></script>
    <script language="javascript" type="text/javascript" src="/media/flot-0.7/js/jquery.flot.stack.js"></script>
    <link type="text/css" href="/media/jquery-ui/css/redmond/jquery-ui-1.8.11.custom.css" rel="Stylesheet" />  
    <script type="text/javascript" src="/media/jquery-ui/js/jquery-ui-1.8.11.custom.min.js"></script>
 
    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery.transform-0.9.3.min.js"></script>  
    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery.json-2.2.min.js"></script>  
    <script type="text/javascript" src="/media/jsTree/jquery.jstree.js"></script>
    
    <script language="javascript" type="text/javascript" src="/media/jquery-1.5.2/jquery.timers-1.2.js"></script>  
 
    <script language="javascript" type="text/javascript" src="js/debug.js"></script>
    <script language="javascript" type="text/javascript" src="js/time.js"></script>
    <script language="javascript" type="text/javascript" src="js/datasource.js"></script>
    <script language="javascript" type="text/javascript" src="js/graph.js"></script>
    <script language="javascript" type="text/javascript" src="js/range.js"></script>
    <script language="javascript" type="text/javascript" src="js/tree.js"></script>

    <title>Graph</title>

    <script type="text/javascript">
    $(document).ready(function() {
      //var total = [ new Stream(7130), new Stream(7099) ];
      //var lighting = [ new Stream(7107), new Stream(7117), new Stream(7100), new Stream(7108), new Stream(7128), new Stream(7087) ];
      //var plug = [ new Stream(7083), new Stream(7096), new Stream(7094), new Stream(7101), new Stream(7118), new Stream(7116) ];

      //var a = new Graph($("#ts"), total, 'ts');
      //var b = new Graph($("#pie"), total, 'pie');
      //var c = new Graph($("#lighting"), lighting, 'pie');
      //var d = new Graph($("#plug"), plug, 'pie');
      //var range = new Range($("#range"), [total[0]], [a,b,c,d]);
      //var t = new Tree($("#tree"), 10);

      var agg = [new TreeStream(10, "464 Power", "Power (kW)")];
      var agg_light = [new TreeStream(11, "4th Floor Lighting", "Power (kW)", 0.001)];

      var g = new Graph($("#ts"), agg, 'ts');
      var t = new Graph($("#light"), agg_light, 'ts');

      var wind = 30*60*1000;
      t.drawUTC(time.serverNow()-wind, time.serverNow());
      g.drawUTC(time.serverNow()-wind, time.serverNow());
      $(this).everyTime(2000, function() { 
        t.drawUTC(time.serverNow()-wind, time.serverNow());
        g.drawUTC(time.serverNow()-wind, time.serverNow()); });
    });
    </script>

    <style type="text/css">
      div.graph {
        position: relative;
        float: left;
        width: 400px;
        height: 300px;
        margin-left: 15px;
      }
      div.range {
        position: relative;
        clear: both;
        width: 400px;
        height: 100px;
      }
      div.tree {
        position: relative;
        float: left;
        width: 400px;
        height: 300px;
        visibility: hidden;
      }
    </style>
</head>
<body>

<div id="ts" class="graph"></div>
<div id="light" class="graph" style="margin-left: 35px;"></div>
<div id="tree" class="tree"></div>

</body>
</html>
